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Conceptos Básicos 
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9 Imagenes Vectoriales 
Las imágenes vectoriales están formadas por vectores, que son objetos formados matemáticamente. Estos vectores están 
definidos por su posición, color, etc. 


Las imágenes vectoriales tienen la ventaja de que pueden ser ampliadas o reducidas sin perder calidad. Su visibilidad es la 
misma en pantalla o en formato impreso independientemente del tamaño. 


Este formato de imagen se emplea principalmente en gráficos, tipografías, diseño publicitario o videojuegos. 
La desventaja es que este formato no permite representar con realismo imágenes complejas como una fotografía. 


Veamos un ejemplo: 





Steam locomotive at Northampton & Lamport Railway Imagen vectorial trazada a mano a partir de una fotografía 
de AmosWolfe (converted to PNG for display on Wikipedia). {{cc-by-sa-2.0}} 


Algunas de las aplicaciones que permiten editar este tipo de imágenes son Corel Draw, Adobe llustrator, o Inkscape. 


(6) i l ; 
— Imágenes de Mapa de bits (Rasterizadas) 


Las imágenes de mapa de bits, son conocidas también como matriciales, bitmap, o ráster. Están formadas por una matriz de 
puntos de color llamados pixels.Al estar formadas por puntos, una mayor cantidad de puntos indica una mayor calidad de 
imagen. 


Veamos un ejemplo: 





Steam locomotive at Northampton & Lamport Railway by AmosWolfe (converted to GIF for display on 
Wikipedia). {{cc-by-sa-2.0}} 
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9) Resolución de una imagen de mapa de bits 


La calidad de una imagen de mapa de bits se mide mediante su resolución, es de decir, su tamaño en píxeles (puntos de 
color). 


Las imagenes con un mayor número de ppp (pixel por pulgada) permitirán ampliar la imagen con menor pérdida de calidad, 
mientras que una con menos ppp aparecerá completamente pixelada en cuanto intentemos ampliarla. 


Para tener una referecia, podemos decir que una calidad baja equivale por ejemplo a 72px, calidad media 150px y alta calidad 
300px. En el enlace que hay en "Para saber más" encontrarás varios ejemplos. 


Atención, no se debe confundir Píxeles por Pulgada (en inglés pixels per inch, ppi) con Puntos por Pulgada (en inglés dot per 
inch, dpi). Los Puntos por pulgada es una medida de impresión. Es una confusión habitual, ya que en castellano la abreviatura 
es la misma (ppi). 





2 Transparencia 


Otro concepto ligado a la imagen digital es la transparencia. Las imágenes con un fondo blanco y aquellas con un fondo 
transparente a menudo parecen iguales, pero no lo son. Cuando colocamos la imagen sobre un fondo de color, apreciamos la 
diferencia. 


Aquí podemos ver una misma imagen con fondo transparente y con fondo gris, sobre una imagen de fondo: 





AAN ITT Testing 


A E , o D 
A A 


Referencia: yuiblog. Stoyan Stefanov. 


Las capas en una imagen son simplemente imágenes superpuestas. La mayor ventaja de usar imágenes o partes de una 
imagen colocadas en distintas capas es que podemos manejar cada una de manera independiente, mostrando u ocultando la 
capa, cambiando el número de colores, etc. Podemos imaginar las capas como láminas de acetato transparente, iguales a las 
que se utilizaban hace tiempo para hacer presentaciones. 


Puedes ver un ejemplo muy interesante de trabajo con capas en el siguiente enlace: 


Golpe Visual. Gastón Acevedo. 
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98) Formatos de imagen 


En el siguiente cuadro podemos ver las características de algunos de los formatos más utilizados. Vamos a comentarlos uno a 
uno. 


BMP: Es el formato de mapa de bits original. Su capacidad de compresión es muy limitada, y por tanto tiende a ser muy 
pesado. Apenas se utiliza hoy día. 


GIF: Su principal característica es que permite guardar varios "frames" o imágenes en el archivo creando un efecto animado. 
Permite compresión y transparencia, lo que lo hace util para utilizarlo en la web. Actualmente está siendo sustituido por png. 


JPEG: Permite un grado de compresión ajustable, perdiendo calidad a medida que se aumenta la compresión por tanto se 
baja su peso en kilobytes. No permite transparencias. 


PNG: Permite compresión sin périda, y uso de transparencias, lo que lo hace un buen "heredero" del gif como formato web. 


PSP/PSD: PSP es el formato nativo de Paint Shop Pro y PSD es el formato nativo de Photoshop. Ambos permiten trabajar con 
capas. 


Tipo Transparencia ¡Compresión Capas [Animación Soporte Internet 
BMP. | No | No [No | No | No | 


psepso| si [si [si [ we [e 





Es fundamental guardar un archivo en el formato nativo de nuestro editor de imagenes (psp si utilizamos PaintShop Pro) ya 
que es el Unico formato que nos permitira trabajar con capas. Si queremos utilizar la imagen en la web, podemos guardar una 
copia en formato png, que sera el que mejor se adapte para ese proposito. El formato jpg es el que permite una mayor 
compresión de la imagen, pero a costa de cierta pérdida de calidad. 


Aqui puedes descargar una imagen en distintos formatos para ver las diferencias: 





Imagen PNG Transparente Imagen JPG sin transparencia 
Py 
iu Para saber más 


Imágenes vectoriales y mapas de bits. Lorena Arranz. 


Qué es un píxel 





A Recomendaciones Moodle 


Tamaño de la imagen: 


Si queremos asegurarnos de que una imagen subida a moodle no se desbordará, y por tanto no aparecerá la molesta barra de 
desplazamiento horizontal, podemos seguir esta recomendación. 


Suponiendo que la resolución mínima de monitor del usuario será 1024x768 o mayor, el ancho máximo de la imagen debería 
ser 660px . El tipo de navegador influye ligeramente en el ancho disponible, pero en una actividad de moodle con una sóla 
columna lateral podemos considerar 660 píxeles como un "tamaño seguro". 


Colores de la imagen: 


En las imágenes utilizadas en la web rara vez es necesario una profundidad de color superior a 32k (32768 colores). Muchas 
de las imágenes tienen una profundidad de color de 64k, pero en realidad si bajamos a 32k el cambio es imperceptible por lo 
que es una buena forma de reducir el peso de la imagen. En algunos casos incluso 256 colores (8 bit) es suficiente, siendo la 


reducción de peso mucho mayor. 





Modificando imágenes con PaintShop Pro 
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90) Paint Shop Pro y otras aplicaciones 


En este taller utilizaremos la aplicación Paint Shop Pro 7. En realidad no será difícil hacer las mismas operaciones en 
Photoshop y otras aplicaciones siempre que conozcamos realmente qué queremos hacer y no sólo la opción de menú que lo 
hace en uno u otro programa. 


Algunas alternativas que te proponemos son: 


Photoshop Express. Servicio online de adobe, que ofrece una parte importante de las funciones de Photoshop. Eso sí, es en 
inglés y requiere registro. 


Gimp. Aplicación opensource de edición de imágenes de mapa de bits. Existen muchos recursos de ayuda en la web. 


Windows Paint. En windows xp todavía es una aplicación muy muy simple, pero mejora bastante a partir de windows 7. Viene 
instalada con el sistema. 
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98) Preparando Paint Shop Pro 


En primer lugar vamos a asegurarnos de que el espacio de trabajo tiene todos los elementos que necesitamos. En la opción 
"View" > "Toolbars" podremos marcar qué barras de herramientas queremos ver en pantalla. Es importante que al menos 
tengamos visibles estas que muestro a continuación: 







Jase Paint Shop Pro 
File Edt RETA Help 
| [1 (> ll Full Screen Edit Shift+4 LB bal I] é? ee 


NOV ¢RE OFF) 


Toolbars 


standard Toolbar 
Citeb Toolbar 

[Photo Toolbar 

QJjEtffects Toolbar Customize.. 
[Browser Toolbar 

| Tool Palette 

Color Palette Help | 
|) Status Bar 

mM) Tool Options Palette 

ilayer Palette 


[Histogram Window 
[ JOverview vvindow 


lv Display flat style toolbars 


le Enable automatic roll-ups 


[ Hide disabled toolbars 





90) El menú de archivo 


Antes de empezar a transformar las imágenes, vamos a repasar el menú de Archivo "File". 


' Jasc Paint Shop Pro - shiny-b Las primeras opciones son las que suele tener cualquier aplicación (nuevo, abrir, 
cerrar...) pero un poco más abajo aparecen algunas otras que merece la pena 
mencionar. 





Edit View Image Effects Ci 





L New... 





> Open... Colo 
[È Browse... Ctri+B La primera que hay resaltada en la imagen es "Save copy as". Con esta opción 
lar Close guardaremos una copia, en el formato que especifiquemos en el siguiente paso. Es 
+8 Revert... útil acostumbrarse a usar esta opción porque siempre guardaremos una copia, sin el 
riesgo de "machacar" el archivo original. Recordar que debemos guardar la imagen 
Ld Save ctl+s | 
en formato nativo, psp, y luego guardar una copia (por ejemplo como png) para 
a DAVE AS... mo usarla en la web, en un powertpoint, etc. 
i] Save Copy AS... Ctrl+F12 
Workspace ó 
if Delete Ctri+Del Otra opción resaltada es "Print Preview". Esta vista previa de impresión nos muestra 
Send... como saldra impresa la imagen, pero ademas nos da muchas opciones de 
configuración para probar cómo queda antes de enviarla a la impresora o al archivo 
Import + 
paf. 
Export é 
* Page Setup... 
ÓS Print Preview Otras opciones más avanzadas son por ejemplo "Workspace" que nos permite 
E Print Ctrl+P administrar distintas configuraciones de nuestro espacio de trabajo, "Export" que 


guarda la imagen en un formato distinto mediante un asistente que permite indicar el 
nivel de compresión que queremos y otros parámetros, o "Preferences", que sirve 
para cambiar los ajustes de la aplicación. 


Print Multiple Images... 


Jasc Software Products 
838 Batch Conversion... 


Preferences i 
Para empezar a trabajar con una imagen, la abrimos desde Paint Shop Pro> File > 


[> Exit 


9) El menú de imagen 


Effects Colors Layers Objects 
Ctrl+I 
Ctrl+M 
COA, 
Tel: Crop to Selection Shift+R, 
“f+ Canvas Size... 
= Resize... Shift+S 


6) Image Information... Shift+] | 


Es Arithmetic... 
fad Add Borders... 
ÉS Picture Frame... 


Watermarking 


imagen. 


96) . . . now w 
9 Principales opciones del menú "Colors 








El menú de imagen (Image) tiene algunas opciones muy sencillas 
pero muy útiles para transformar la imagen. 


Las opciones Flip y Mirror voltean la imagen en vertical y en 
horizontal, mientras que rotate permite indicar el número de 
grados y el sentido en el que queremos girarla. 


"Canvas Size" permite modificar el tamaño del lienzo de fondo. Si 
necesitamos añadir un texto, superponer otra imagen, o hacer 
alguna otra modificación para la que necesitamos un espacio 
"extra", podemos usar esta opción. Indicando un tamaño mayor 
del de la imagen actual, obtendremos ese espacio. Además, 
podemos indicar si ese espacio lo queremos ampliar a izquierda, 
derecha, arriba o abajo. 


"Resize" Nos permitirá cambiar el tamaño completo de la imagen, 
indicándolo en porcentaje, en pixels, o en tamaño de impresión. 


"Image information" Nos ofrece información útil sobre tamaño, 
pixels por pulgada, etc. 


Las opciones "Add Borders" y "Picture Frame" nos facilitarán 
hacer pequeños efectos para dar un aspecto más profesional a la 


Este menú incluye muchas opciones de manejo del color que son demasiado avanzadas para el objetivo de este taller. Sin 


embargo hay algunas que sí merece la pena revisar. 


La opcion "Colors" > "Adjust" > "Brightness/Contrast" nos muestra un cuadro como el siguiente, en el que podemos modificar 
los valores de brillo y contraste mientras vemos el resultado en la vista previa. 





Brightness/Contrast 


oom 1:1 


= Contrast 





cot | te | a 


Las ultimas opciones, Increase/Decrease color depth aumentan o reducen la profundidad de color. Podemos comprobar como 
cambia el peso de la imagen al modificar estos valores. 
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9 Insertando un cuadro de texto 
En este apartado, además de comprobar cómo funcionan los cuadros de texto, veremos muy por encima el uso de capas. 


Para insertar un cuadro de texto hacemos click en la herramienta texto A , que se encuentra en la barra de herramientas 
(normalmente a la izquierda). Veremos que al pasar el cursor por la imagen, muestra un icono con una cruz y una "A". 
Hacemos click en la imagen y aparecerá un cuadro como este, en el que resaltamos las principales opciones: 


Text Entry 
É | a n Kering: Leading: 
=“) AaBb 
Script ccd E 


. Styles o Enter text here 


Stroke: (=k 





Create as— 


standard text | @ “Vector C Selection ( Floating |v Antialias 
Cancel | Help | [> [4 





Podemos explorar como funciona cada una de estas opciones, pero lo mas importante es que sepamos como recuperar este 
cuadro para editarlo sino estamos contentos con el resultado. Después de aceptar, el cuadro desaparece y vemos texto 
insertado en la imagen, con los nodos que permiten transformarlo: 








® Nodos externos para transformar la imagen 


Nodo central | —— 
eee: TEN f ii x 


PEA 


TN eee Nodo de Siro 


Pero ¿Qué ocurre si queremos cambiar el texto, el color del trazo, etc...?. Veamos la Barra de Capas. Ha aparecido una capa 
nueva llamada "Layer1" por defecto, con un símbolo "+". Al hacer clic en el símbolo, aparece una pequeña barra con el texto, y 
haciendo doble click en la misma recuperamos el cuadro de texto. 


8 Palette - Layerl 





E HE EXE se BO towel o +s 


i is | o... Normal 







os Palette - Layerl 


a ce Normal + 
| LA Diseño Gráfico Básico 08 
-E Background III AS 









Normal 





Podemos "jugar" con la opcidad de las capas utilizando los controles de la derecha, y mostrarlas/ocultarlas haciendo click en el 


icono de las gafas. 
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90) Distribución de objetos 


Cuando tenemos un objeto texto seleccionado, aparecen los nodos alrededor. Estando seleccionado podemos ir al menú 
"Objects" > "Align" y alinear el objeto en horizantal, en vertical, o ambos. 


E 
yers [BESAN Selections Masks Window Help 
| Align 

Distribute 
Make Same Size 

Arrange | 

MUN H Group Vertical Center 

| ' A EG UnGroup $ Horizontal Center 
; E Center in Canas 
Ele] Horz. Center in Canvas 


dA Fit Text to Path 
Convert Text to Curves 





Capturas de pantalla 
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98) Capturar pantalla desde Paint Shop Pro 


PaintShop Pro incluye su propia herramienta de captura de pantalla, accesible desde esta opción: 






Jasc Paint Shop Pro 
SEN Edit View Help 








O New... Ctrien E] AR gh 
ta Open... Colo 
ER Browse... Ctrl+B 

Workspace á 









Import screen Capture d É% Setup... 
TWAIN t ga Start Shift+C 
Digital Camera + 










Jase Software Products 











838 Batch Conversion... 
Plug-in Import ¥ 
Preferences z 
1 iconotransparente, jpg 

2 iconotransparente. gif 

3 114525-magic-marker-icon-alphanumeric-boxed-~4 png 

4 pajarodit. gif 





[> Exit 


y 
Ss 






Primero definimos el área que vamos a capturar, tal como se muestra a continuación, y despues activamos la herramienta con 
click derecho y marcamos la zona a capturar (si hemos definido que capturaremos una zona concreta) con el click izquierdo. 


Capture Setup 


Capture Activate capture using Options- 


(a Area @ Right mouse click Include cursor 
© Full screen O Hotkey | Multiple captures 
C Client area F1] 

C Window C Delay timer 


C Object E — seconds 
Capture Now | Cancel | Help | 
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98) Capturar desde Windows 


Windows permite hacer dos tipos de captura de pantalla: 





Alt+ImprPant Captura la venta activa 


Mayúsculas+ImprPant Captura toda la pantalla. 


Esto coloca la captura en memoria, y podemos pegarla con Ctrl+V en otra aplicación. 


Windows 7 dispone de un pequeño editor que nos permitirá hacer pequeños cambios en la imagen antes de pegarla en otra 
aplicación. 





9) Utilizar plugins en el navegador. 


Existen varios plugins (complementos) para firefox y google chrome que permite capturar, editar esas capturas, imprimir, 
guardar en incluso subir directamente a un repositorio las capturas editadas. 


Uno de esos plugins es Fireshot 





Bancos de imágenes y Derechos de Autor 


9 ¿Dónde encuentro imágenes para mis proyectos? 


No todas las imágenes que encontremos haciendo una búsqueda en google pueden ser utilizadas. De hecho, sólo deberíamos 
utilizar aquellas que expresamente lo autoricen, e incluso en esos casos habrá ciertas limitaciones. Esa autorización se ofrece 
habitualmente en forma de licencia Creative Commons. 


En el espacio e-docencia (requiere acceso identificado), dentro de la pestaña de Diseño Gráfico, podemos encontrar enlaces a 
bancos de imágenes y de texturas que podrán servirnos de base para nuestros diseños. En cada enlace encontraremos 
información sobre la licencia de uso. 


Es recomendable citar las fuentes incluso cuando esto no se exija en la licencia. Todos los autores agradecen que se les cite, 
y si añadimos un enlace a su web o blog les ayudaremos a difundir su trabajo. 


Para empezar, podemos encontrar texturas base en esta web: 


GraphicsFuel 


Esta web está en formato Blog. 

No requiere registro. 

Los fondos están agrupados por colecciones, cada una en un post. 

Algunos de los post contienen materiales propios, pero otros redirigen a páginas externas. 


La licencia se indica al final de cada post, y suele ser libre para uso personal y comercial 





o ¿Y qué son las licencias Creative Commons? 


Indicar una licencia creative commons significa ofrecer algunos derechos a terceros, bajo determinadas condiciones. Estas 
condiciones tienen que ver con el Reconociminento del autor, el uso comercial de la obra, la posibilidad de transformar la obra 
para crear una obra derivada, y la obligación de compartir las obras derivadas bajo la misma licencia. 


Puedes encontrar información detallada aquí: Creative Commons. 


En el espacio e-docencia puedes consultar un apartado más completo sobre derechos de autor en general. 





Video de demostración 


Versión para imprimir 


Puedes descargar una versión en pdf desde aquí: 


Diseño Gráfico Básico. Versión imprimible. 





Obra colocada bajo licencia Creative Commons Attribution Non-commercial Share Alike 3.0 License 


